<script setup>
import { onMounted, ref, watch } from 'vue'

const props = defineProps({
    object: {
        type: Object,
        default: () => {}
    }
})
const items = ref([])
watch(
    () => props.object,
    () => {
        if (props.object) {
            items.value.length = 0
            for (const key in props.object) {
                const value = props.object[key]
                items.value.push({
                    label: key,
                    value: value,
                    isCheck: true,
                    remark: ''
                })
            }
        }
    }
)

const onCreate = () => {
    return {
        isCheck: true,
        label: '',
        label: '',
        remark: ''
    }
}
</script>
<template>
    <n-dynamic-input v-model:value="items" :on-create="onCreate">
        <template #create-button-default>添加参数</template>
        <template #default="{ value }">
            <n-flex align="center" :wrap="false" justify="space-between">
                <n-checkbox v-model:checked="value.isCheck" />
                <n-input v-model:value="value.label" placeholder="参数名" />
                <n-input v-model:value="value.value" placeholder="参数值" />
                <n-input v-model:value="value.remark" placeholder="备注" />
            </n-flex>
        </template>
    </n-dynamic-input>
</template>
